<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>AllBeAPI - Minimal Utility Function Set for Rapid Development</title>
    <meta name="description" content="Cloud-based utility functions for rapid prototyping. Access Markdown conversion, QR codes, image processing, and more without heavy dependencies. Python & JavaScript SDKs included.">
    <meta name="keywords" content="SDK, API, utility functions, rapid development, prototyping, markdown, QR codes, image processing, Python, JavaScript, no dependencies">
    <meta name="author" content="AllBeAPI Team">
      <!-- Open Graph -->
    <meta property="og:title" content="AllBeAPI - Minimal Utility Function Set for Rapid Development">
    <meta property="og:description" content="Cloud-based utility functions for rapid prototyping. Access Markdown, QR codes, image processing without dependencies.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://allbeapi.com">
    <meta property="og:image" content="https://allbeapi.com/assets/images/og-image.png">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="AllBeAPI - Minimal Utility Function Set for Rapid Development">
    <meta name="twitter:description" content="Cloud-based utility functions for rapid prototyping. Access Markdown, QR codes, image processing without dependencies.">
    <meta name="twitter:image" content="https://allbeapi.com/assets/images/og-image.png">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/components.css">
    <link rel="stylesheet" href="assets/css/modern.css">
    
    <!-- Preload critical resources -->
    <link rel="preload" href="assets/css/main.css" as="style">
    <link rel="preload" href="assets/js/main.js" as="script">
    <link rel="preload" href="assets/js/components.js" as="script">
    
    <!-- Theme -->
    <script>
        // Immediately apply theme to prevent flash
        const savedTheme = localStorage.getItem('theme') || 
            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
        document.documentElement.setAttribute('data-theme', savedTheme);
    </script>
</head>
<body>
    <!-- Language Switch -->
    <div class="language-switch">
        <div class="container">
            <a href="index.html" class="active">English</a> | <a href="index_zh.html">中文</a>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="navbar">
        <div class="container">
            <div class="navbar-content">
                <a href="#" class="navbar-brand">AllBeAPI</a>
                <ul class="navbar-nav">
                    <li><a href="#about" class="active">About</a></li>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#usage">Usage</a></li>
                    <li><a href="docs/index.html">Documentation</a></li>
                    <li><a href="https://github.com/TingjiaInFuture/allbeapi" target="_blank">GitHub</a></li>
                </ul>
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <button class="theme-toggle" aria-label="Toggle theme">🌙</button>
                </div>
            </div>
        </div>
    </nav>    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Minimal Utility Function Set for Rapid Development</h1>
                <p>AllBeAPI is a cloud-based utility function set designed for rapid prototyping and experimentation. Access ready-to-use tools like Markdown conversion, QR code generation, and image processing — all without installing heavy dependencies. Get started in under 60 seconds with Python or JavaScript.</p>
                <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
                    <a href="#features" class="btn btn-primary btn-lg">View Functions</a>
                    <a href="https://github.com/TingjiaInFuture/allbeapi" target="_blank" class="btn btn-outline btn-lg">View on GitHub</a>
                    <a href="docs/index.html" class="btn btn-secondary btn-lg">Documentation</a>
                </div>
            </div>
        </div>
    </section>    <!-- Stats Section -->
    <section class="section">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-card">
                    <span class="stat-number">13+</span>
                    <span class="stat-label">Utility Functions</span>
                </div>
                <div class="stat-card">
                    <span class="stat-number">0</span>
                    <span class="stat-label">Dependencies Required</span>
                </div>
                <div class="stat-card">
                    <span class="stat-number">60s</span>
                    <span class="stat-label">Setup Time</span>
                </div>
                <div class="stat-card">
                    <span class="stat-number">MIT</span>
                    <span class="stat-label">Open Source</span>
                </div>
            </div>
        </div>
    </section>    <!-- About Section -->
    <section id="about" class="section section-alt">
        <div class="container">
            <h2 class="text-center">Designed for Rapid Prototyping</h2>
            <div class="grid grid-2" style="align-items: center; gap: 3rem;">
                <div>
                    <p>AllBeAPI is a <strong>minimal utility function set</strong> that helps developers complete prototypes and experiments in minimal time. Instead of installing and configuring multiple libraries, just download one SDK file and start coding.</p>
                    
                    <div class="alert alert-info">
                        <strong>🚀 Perfect for:</strong> MVPs, prototypes, experiments, educational projects, and rapid feature testing without dependency management overhead.
                    </div>
                    
                    <p><strong>Key Benefits:</strong> No package management, unified API calls, multi-language support, instant integration.</p>
                    <p><strong>Use Cases:</strong> Content conversion, data validation, image processing, document generation, code formatting.</p>
                </div>
                <div>
                    <div class="code-example">
                        <div class="code-tabs">
                            <button class="code-tab active">JavaScript</button>
                            <button class="code-tab">Python</button>
                        </div>
                        <div class="code-content">
                            <pre class="code-block" data-language="javascript">// Download SDK, then:
const api = new AllBeApi();

// Convert Markdown to HTML
const html = await api.marked.render("# Hello World");

// Generate QR Code
const qrBlob = await api.pythonQrcode.generateQrcode("https://allbeapi.com");</pre>
                            <pre class="code-block" data-language="python" style="display: none;"># Download SDK, then:
from allbeapi import AllBeApi

api = AllBeApi()

# Convert Markdown to HTML
html = api.marked.render("# Hello World")

# Generate QR Code  
qr_bytes = api.python_qrcode.generate_qrcode("https://allbeapi.com")</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>    <!-- Features Section -->
    <section id="features" class="section">
        <div class="container">
            <h2 class="text-center">Ready-to-Use Utility Functions</h2>
            <p class="text-center" style="font-size: 1.1rem; margin-bottom: 3rem; color: var(--text-secondary);">
                13+ powerful tools accessible through a unified API - no installation, no configuration
            </p>
            
            <!-- Features Grid -->
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📝</div>
                    <h3 class="feature-title">Markdown Processing</h3>
                    <p class="feature-description">Convert Markdown to HTML effortlessly using Marked.js integration with support for extensions and custom renderers.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔍</div>
                    <h3 class="feature-title">HTML Parsing & Manipulation</h3>
                    <p class="feature-description">Leverage BeautifulSoup to parse, extract data from, and clean HTML content with powerful CSS selectors.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">✨</div>
                    <h3 class="feature-title">Code Formatting</h3>
                    <p class="feature-description">Format your code beautifully with Prettier for JavaScript, TypeScript, CSS, HTML, and more languages.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎨</div>
                    <h3 class="feature-title">Syntax Highlighting</h3>
                    <p class="feature-description">Use Pygments to add rich syntax highlighting to your code snippets with 500+ supported languages.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📱</div>
                    <h3 class="feature-title">QR Code Generation</h3>
                    <p class="feature-description">Generate QR codes quickly with python-qrcode, supporting various formats and customization options.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🛡️</div>
                    <h3 class="feature-title">HTML Sanitization</h3>
                    <p class="feature-description">Protect against XSS attacks by sanitizing HTML input with sanitize-html's robust filtering.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">✅</div>
                    <h3 class="feature-title">JSON Schema Validation</h3>
                    <p class="feature-description">Validate JSON data against schemas using Ajv, the fastest JSON schema validator for JavaScript.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔧</div>
                    <h3 class="feature-title">JavaScript/TypeScript Linting</h3>
                    <p class="feature-description">Analyze your JavaScript and TypeScript code with ESLint to catch errors and enforce coding standards.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📊</div>
                    <h3 class="feature-title">Text Differencing</h3>
                    <p class="feature-description">Compare texts and highlight differences with Diff, perfect for version control and change tracking.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📋</div>
                    <h3 class="feature-title">CSV Parsing</h3>
                    <p class="feature-description">Convert CSV data to JSON format easily with csv-parser, handling various delimiters and formats.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📈</div>
                    <h3 class="feature-title">Diagram Generation</h3>
                    <p class="feature-description">Create diagrams from text using Mermaid CLI - flowcharts, sequence diagrams, and more.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📄</div>
                    <h3 class="feature-title">PDF Generation</h3>
                    <p class="feature-description">Generate PDF documents programmatically with PDFKit, supporting text, images, and vector graphics.</p>
                </div>                <div class="feature-card">
                    <div class="feature-icon">🖼️</div>
                    <h3 class="feature-title">Image Processing</h3>
                    <p class="feature-description">Perform various image manipulations with Pillow - resize, rotate, filter, and format conversion.</p>
                </div>
            </div>
        </div>
    </section><!-- Usage Section -->
    <section id="usage" class="section section-alt">
        <div class="container">
            <h2 class="text-center">Easy to Use SDKs</h2>
            <p class="text-center" style="font-size: 1.1rem; margin-bottom: 3rem; color: var(--text-secondary);">
                We provide SDKs in popular languages to get you started quickly
            </p>
            
            <div class="code-example">
                <div class="code-tabs">
                    <button class="code-tab active">JavaScript</button>
                    <button class="code-tab">Python</button>
                    <button class="code-tab">cURL</button>
                </div>
                <div class="code-content">
                    <pre class="code-block" data-language="javascript">// Make sure to include allbeapi.js
// &lt;script src="SDK/JavaScript/allbeapi.js"&gt;&lt;/script&gt;

const apiClient = new AllBeApi();

// Example: Convert Markdown to HTML
apiClient.marked.render("# Hello AllBeAPI")
    .then(response => {
        console.log(response); // HTML output
        // Assuming the response is the direct HTML string or an object containing it
        // If it's an object like { html: "&lt;h1&gt;Hello AllBeAPI&lt;/h1&gt;" }, access response.html
    })
    .catch(error => console.error("Error:", error));

// Example: Generate QR Code (returns a Blob)
apiClient.pythonQrcode.generateQrcode("https://res.allbeapi.top")
    .then(blob => {
        const imageUrl = URL.createObjectURL(blob);
        console.log("QR Code Image URL:", imageUrl);
        // You can then use this URL in an &lt;img&gt; tag
        // const imgElement = document.createElement('img');
        // imgElement.src = imageUrl;
        // document.body.appendChild(imgElement);
    })
    .catch(error => console.error("Error:", error));</pre>
                    
                    <pre class="code-block" data-language="python" style="display: none;"># Make sure allbeapi.py is in your PYTHONPATH or same directory
# from allbeapi import AllBeApi # Assuming the file is named allbeapi.py

# For the provided structure:
# import sys
# sys.path.append('SDK/Python') # Adjust if running from a different root
# from allbeapi import AllBeApi

client = AllBeApi()

# Example: Convert Markdown to HTML
try:
    html_output = client.marked.render("# Hello AllBeAPI from Python")
    print(html_output) # This will likely be a JSON string or dict
except Exception as e:
    print(f"Error: {e}")

# Example: Generate QR Code (returns bytes)
try:
    qr_image_bytes = client.python_qrcode.generate_qrcode("https://res.allbeapi.top")
    with open("example_qrcode.png", "wb") as f:
        f.write(qr_image_bytes) # The response.content if using requests directly, or the direct bytes
    print("QR Code saved to example_qrcode.png")
except Exception as e:
    print(f"Error: {e}")</pre>
                    
                    <pre class="code-block" data-language="bash" style="display: none;"># Convert Markdown to HTML
curl -X POST https://res.allbeapi.top/marked/render \
  -H "Content-Type: application/json" \
  -d '{"markdown": "# Hello AllBeAPI"}'

# Generate QR Code
curl -X POST https://res.allbeapi.top/python-qrcode/generate-qrcode \
  -H "Content-Type: application/json" \
  -d '{"data": "https://res.allbeapi.top"}' \
  --output qrcode.png

# Format JavaScript code
curl -X POST https://res.allbeapi.top/prettier/format \
  -H "Content-Type: application/json" \
  -d '{"code": "const x=1;", "parser": "babel"}'</pre>
                </div>
            </div>
            
            <div class="text-center mt-4">
                <p>
                    <a href="SDK/JavaScript/allbeapi.js" target="_blank" class="btn btn-outline">📄 JavaScript SDK</a>
                    <a href="SDK/Python/allbeapi.py" target="_blank" class="btn btn-outline" style="margin-left: 1rem;">🐍 Python SDK</a>
                    <a href="docs/api.html" class="btn btn-primary" style="margin-left: 1rem;">📚 Full API Documentation</a>
                </p>
            </div>
        </div>
    </section>

    <!-- Contribute Section -->
    <section id="contribute" class="section">
        <div class="container">
            <h2 class="text-center">Contribute to AllBeAPI</h2>
            <div class="grid grid-2" style="align-items: center; gap: 3rem;">
                <div>
                    <p>AllBeAPI is an open-source project. We welcome contributions from the community! Whether it's adding new library integrations, improving documentation, or fixing bugs, your help is appreciated.</p>
                    <div class="alert alert-success">
                        <strong>🎉 Join our community!</strong> Help us build the most comprehensive universal SDK for developers.
                    </div>
                </div>
                <div class="text-center">
                    <a href="https://github.com/TingjiaInFuture/allbeapi/issues" target="_blank" class="btn btn-success btn-lg">🐛 Report an Issue</a>
                    <a href="https://github.com/TingjiaInFuture/allbeapi/pulls" target="_blank" class="btn btn-info btn-lg mt-2">🔀 Submit a Pull Request</a>
                    <a href="docs/contributing.html" class="btn btn-outline btn-lg mt-2">📖 Contribution Guide</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; <span id="currentYear"></span> AllBeAPI Project. Licensed under the MIT License.</p>
            <p style="margin-top: 0.5rem; font-size: 0.875rem; opacity: 0.8;">
                Built with ❤️ by the open-source community
            </p>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="assets/js/main.js"></script>
    <script src="SDK/JavaScript/allbeapi.js"></script>
    <script>
        document.getElementById("currentYear").textContent = new Date().getFullYear();
    </script>
</body>
</html>
